<template>
	<view class="account-charge">
		<Nav :bgColor="bgColor" title="星钻充值" @back="back"></Nav>
		<view class="account-info flex align-center justify-between">
			<view class="flex flex-column">
				<text class="label">当前余额</text>
				<view class="flex align-center">
					<text class="unit-icon"></text>
					<text class="account-value">{{accountInfo.coin}}</text>
				</view>
			</view>
			<navigator url="/magicpages/coin_record/coin_record" class="record-link">交易记录</navigator>
		</view>
		<view class="charge-list">
			<radio-group @change="radioChange">
				<view class="charge-item flex align-center justify-between"
					:class="current==item.id?'charge-item-active':''" v-for="(item,index) in chargeList"
					:key="index">
					<view class="flex align-center">
						<view class="unit-icon-wrapper flex justify-center align-center">
							<text class="unit-icon-inner"></text>
						</view>
						<view class="visual flex flex-column">
							<text>{{item.coin_num}}个星钻</text>
							<view class="flex align-end mt-30">
								<text class="small-price">￥</text>
								<text class="price">{{parseFloat(item.price).toFixed(2).split(".")[0]}}.</text>
								<text class="small-price">{{parseFloat(item.price).toFixed(2).split(".")[1]}}</text>
							</view>
						</view>
					</view>
					<view class="flex align-center">
						<radio color="#6E24FF" class="pay-radio" :value="item.id+''" :checked="item.id == current" />
					</view>
				</view>
			</radio-group>
		</view>
		<view class="pay-container flex flex-column align-center">
			<view class="pay-btn" @click="toPay">确认支付 ￥{{c_selectCharge}}</view>
			<view class="flex rule align-center justify-center">
				<radio class="rule-radio" color="#6E24FF" :checked="ruleCheck" @click="ruleCheck=!ruleCheck" />
				<navigator url="/pages/magic-box/rule/index?url=/api/protocal/payhelp.html" class="rule-tip">支付即同意《星钻充值服务协议》</navigator>
			</view>
		</view>
		<!-- 选择支付方式弹窗 -->
		<ns-payment ref="choosePaymentPopup" :payMoney="c_selectCharge" @confirm="confirmPay"></ns-payment>
	</view>
</template>

<script>
	import Nav from "@/components/magic-box/magic-nav/index.vue"
	import navMixin from "@/common/js/nav.js"
	import nsPayment from '@/components/payment/payment.vue';
	import account from "@/common/js/account.js"
	export default {
		mixins: [navMixin,account],
		components: {
			Nav,
			nsPayment
		},
		data() {
			return {
				ruleCheck: false,
				current: "1",
				chargeList: []
			};
		},
		computed: {
			c_selectCharge() {
				if (!this.chargeList.length) {
					return
				}
				const item = this.chargeList.find(item => item.id == this.current)
				return item.price
			}
		},
		methods: {
			// 显示选择支付方式弹框
			toPay() {
				if(!this.ruleCheck){
					uni.showToast({
						icon:"none",
						title:"请勾选星钻充值服务协议"
					})
					return
				}
				this.$refs.choosePaymentPopup.open();
			},
			// 确认支付
			async confirmPay() {
				const {
					payTypeList,
					payIndex
				} = this.$refs.choosePaymentPopup
				try {
					const result = await this.$api.sendRequest({
						url: "/api/coin/coinbuy",
						async: false,
						data: {
							pay_pack: this.current,
							pay_way: payTypeList[payIndex].type
						}
					})
					if(this.box_id){
						this.$refs.choosePaymentPopup.getPayInfo(result.data.out_trade_no,"/pages/magic-box/detail/detail?magicBoxId="+this.box_id)
					}else{
						this.$refs.choosePaymentPopup.getPayInfo(result.data.out_trade_no,"/magicpages/account_charge/account_charge")
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			async getPayList() {
				try {
					const result = await this.$api.sendRequest({
						url: "/api/coin/list",
						data: {},
						async: false
					})
					this.chargeList = result.data
					this.current = result.data[0].id + ""
				} catch (e) {
					//TODO handle the exception
				}

			},
			radioChange({
				detail: {
					value
				}
			}) {
				this.current = value
			}
		},
		onLoad(options) {
			this.box_id = options.box_id;
			//获取星钻套餐
			this.getPayList()
		}
	}
</script>

<style lang="scss" scoped>
	.account-charge /deep/ uni-radio .uni-radio-input-checked {
		background-color: #6E24FF !important;
		border-color: #6E24FF !important;
	}

	.account-charge {
		padding-bottom: 188rpx;
		.account-info {
			padding: 0 25rpx;
			margin: 0 21rpx 0 19rpx;
			height: 194rpx;
			background: url("~@/static/image/account-bg.png");
			background-size: 100% 100%;
			border-radius: 10rpx;
		}

		.label {
			margin-bottom: 28rpx;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 26rpx;
			color: #FFFFFF;
		}

		.unit-icon {
			margin-right: 24rpx;
			width: 89rpx;
			height: 89rpx;
			background: url("~@/static/image/coin-icon-bg.png");
			background-size: 100% 100%;
		}

		.account-value {
			font-size: 47rpx;
			font-weight: bold;
			color: #FFFFFF;
		}

		.record-link {
			width: 138rpx;
			height: 50rpx;
			background: rgba(255, 255, 255, 0.2);
			border: 1rpx solid rgba(255, 255, 255, 0.5);
			border-radius: 25rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 25rpx;
			font-weight: 500;
			color: #FFFFFF;
		}

		.charge-list {
			margin: 24rpx 22rpx 0 19rpx;
			background-color: #F2F4FF;
			border-radius: 21rpx;
			.mt-30{
				margin-top: 15rpx;
			}
			.charge-item {
				padding: 38rpx 28rpx;
				height: 181rpx;
				box-sizing: border-box;
				.unit-icon-wrapper {
					height: 99rpx;
					width: 99rpx;
					background: #E2F5FF;
					border-radius: 42rpx;

					.unit-icon-inner {
						height: 66rpx;
						width: 66rpx;
						background: url("~@/static/image/coin-icon.png");
						background-size: 100% 100%;
					}
				}

				.visual {
					margin-left: 26rpx;
					font-weight: 500;
					color: #333333;
					font-size: 32rpx;
				}
				.small-price{
					font-size: 32rpx;
					line-height: 32rpx;
					font-weight: bold;
					color: #FF0036;
				}
				.price {
					line-height: 40rpx;
					font-size: 47rpx;
					font-weight: bold;
					color: #FF0036;
				}
				.pay-radio{
					transform: scale(0.8);
				}
			}

			.charge-item-active {
				background: #FFFFFF;
				border-radius: 21rpx;
			}
		}

		.pay-container {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			background-color: #f8f8f8;
			padding: 20rpx 24rpx calc(constant(safe-area-inset-bottom) + 19rpx);
			padding: 20rpx 24rpx calc(env(safe-area-inset-bottom) + 19rpx);

			.pay-btn {
				width: 100%;
				height: 89rpx;
				background: linear-gradient(90deg, #6185FF, #8B60FF);
				border-radius: 44rpx;
				font-size: 33rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 89rpx;
				text-align: center;
			}

			.rule {
				margin-top: 19rpx;

				.rule-radio {
					transform: scale(0.7);
				}

				.rule-tip {
					font-size: 24rpx;
				}
			}
		}
	}
</style>
